<!--
 * @Description: 地区榜
 * @Author: py
 * @Date: 2024-11-12
-->
<script setup lang="ts" name="area-table">
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useAreaBoard } from '@fl/api/data-analysis'
import { SearchTable } from '@fl/components'
import { useRouter } from 'vue-router'
import XEUtils from 'xe-utils'

const props = withDefaults(defineProps<{
    dateRange?: any
}>(), {
    dateRange: () => {},
})

// const router = useRouter()

const { dateRange } = toRefs(props)

// function formatNum({ cellValue }) {
//     return XEUtils.commafy(Number(cellValue), { digits: 0 })
// }
function formatRate({ cellValue }) {
    return cellValue === 0 ? '0%' : `${(cellValue * 100).toFixed(2)}%`
}
const gridOptions = reactive<VxeGridProps>({
    align: 'left',
    border: 'inner',
    columns: [
        // { type: 'checkbox', width: 50 },
        { title: '排名', type: 'seq', width: 60 },
        { minWidth: 100, slots: { default: 'areaName' }, title: '地区名称' },
        { field: 'userVisitor', sortable: true, title: '访问量', width: 90 },
        { field: 'visitorNumber', sortable: true, title: '访问人数', width: 100 },
        { field: 'couponNumber', sortable: true, title: '领取量', width: 90 },
        { field: 'userCoupon', sortable: true, title: '领取人数', width: 100 },
        { field: 'couponRations', formatter: formatRate, minWidth: 110, sortBy: 'couponRations', sortable: true, title: '领取转化率' },
        { field: 'writeOffNumber', minWidth: 90, sortable: true, title: '核销量' },
        { field: 'writeOff', formatter: formatRate, minWidth: 90, sortBy: 'writeOff', sortable: true, title: '核销率' },
        { field: 'writeOffsRatios', formatter: formatRate, minWidth: 110, sortBy: 'writeOffsRatios', sortable: true, title: '核销转化率' },
        { field: 'earnestSign', minWidth: 125, sortable: true, title: '意向签约套数' },
        { field: 'userOnlineHouse', sortable: true, title: '成交人数', width: 100 },
    ],
    minHeight: 420,
    rowConfig: {
        keyField: 'id',
    },
})

const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const records = ref()
// 查询列表
const params = computed(() => ({
    endTime: dateRange.value?.endTime,
    pageNo: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
    startTime: dateRange.value?.startTime,
}))
const { data, isLoading } = useAreaBoard(params)
watchEffect(() => {
    if (data.value) {
        records.value = data.value?.rows
        tablePage.value.total = data.value.total
    }
})

const multipleSelection = ref([])
function handleSelectionChange({ records: selectedArr }) {
    console.log(selectedArr)
    multipleSelection.value = selectedArr
}
// function handleExport() {
//     if (multipleSelection.value.length === 0) {
//         ElMessage.warning('请选择要导出的数据')
//         return
//     }
//     console.log('导出')
// }

// function toProjectCouponDetails() {
//     router.push(`/data-analysis/coupon-statistics?startDate=${dateRange.value?.startTime}&endDate=${dateRange.value?.endTime}&type=writeOff`)
// }
</script>

<template>
    <div>
        <!-- <el-button type="primary"
                   @click="handleExport"
        >
            导出
        </el-button> -->

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="records"
                     @page-change="handlePageChange"
                     @checkbox-change="handleSelectionChange"
        >
            <template #areaName="{ row }">
                <!-- <span class="text-#da0004 cursor-pointer"
                      @click="toProjectCouponDetails"
                >{{ row.areaId }}</span> -->
                {{ row.areaId }}
            </template>
        </SearchTable>
    </div>
</template>

<style lang="less" scoped></style>
